<template>
  <div class="box">
    <div class="contest" @click.stop="">
      <div class="span">
        任务详情
      </div>
      <div class="text">
        &nbsp;&nbsp;{{text}}
      </div>
      <div class="releaseTime">
        发布时间：{{releaseTime}}
      </div>
      <div class="deadlind">
        截止时间：{{deadline}}
      </div>
      <div class="bottom">
        <button>接受</button>
        <button>取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '2346546157485111513544',
      releaseTime: '', // 发布时间
      deadline: '', // 截止时间
      alert: 'false',
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(37, 38, 45, 0.7);
  z-index: 999;
  .contest {
    width: vw(500);
    height: vw(700);
    margin: vw(300) auto;
    background-color: #ffffff;
    border-radius: 5px;
    .span {
      // text-align: center;
      font-size: vw(40);
      padding: vw(20) 0;
      overflow: auto;
      border-bottom: 1px solid #e4e4e4;
    }
    .text {
      width: 100%;
      height: 60%;
      word-break: break-all; // 任务内容长度到达div宽度时自动换行
      overflow-y: auto; //任务内容超出div高度时出现滚动条
    }
  }
}
</style>
